This is a Tailwind Play link with all the required assets and other styles applied. You can
either give it a shot or skip it. I recommend trying it once or at least looking at the unsolved
output once, so that you'll appreciate and understand the concept I will next present. The
examples are such that, it's usually difficult or impossible to get the desired output
without the knowledge of the concept I will talk about after that example. So don't spend
much time on it and don't get disappointed if you can't get it working.
STEP 3 : I will provide you with the code snippet highlighting the additional utility classes
(usually just a couple of them) you can add to the above Tailwind Play link. Then it works!
Even without knowing the concept, just looking at those class names, you might be able to
make sense of what's happening.
Just in case it didn't work, you can compare your code with the ▸ Working Demo
STEP 4 : Next we will get to explaining the concept and understand the utility classes we
just used, and also look at other utilities related to the same concept. This is labelled
Concept
STEP 5 : You might see some more examples next, to practice the concept that you just
learned with different classes related to the same CSS property. Each of these examples
have working demo links below them.
STEP 6 : And then the cycle continues with new examples and concepts.
The Examples labeled 1a, 1b, 1c and so on are related to Concept 1
Newbie's Guide
If you are completely new to Flexbox and Grid, don't skip any of the steps above. Go
through the examples multiple times if needed, until you understand what's going on.
Please note that the order in which the concepts are covered in this book is very different
from most of the tutorials you will see. So I recommend completing this book fully before
you look into other resources online, to avoid confusion.